import React, {useState, useEffect} from 'react';
import echarts from 'echarts';
import {Spin} from 'antd';
import {INCLUDE} from '~/utils/const';
import {defaultChartsOption} from './data';

const DistributionCharts = props => {
    const {data, targetType, clientType} = props;
    const generateOption = data => {
        const yAxis = [];
        const dataSetList = [];

        // 判断是否显示服务端
        const showServer = targetType.current === 3 && clientType === 0;
        // 服务端tab 并且宿主环境是全部的时候
        if (showServer) {
            yAxis.push('服务端');
        }
        else {
            for (const value of INCLUDE.values()) {
                yAxis.push(value);
            }
        }
        data.forEach(item => {
            dataSetList.push([
                Number(item.datetime),
                showServer ? '服务端' : INCLUDE.get(item.include),
                item.value === 0 ? 0 : Math.log(item.value + 1)
            ]);
        });
        return {
            tooltip: {
                position: 'top',
                formatter(params) {
                    const value = Math.round(Math.exp(params.value[2]) - 1);
                    const min = params.value[0];
                    const max = min + 100;
                    return `维度：${params.value[1]}[${min}, ${max})： ${value} 人次`;
                }
            },
            grid: {
                left: '5%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                // data: hours,
                boundaryGap: false,
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: '#999',
                        type: 'dashed'
                    }
                },
                axisLine: {
                    show: false
                },
                axisLabel: {
                    formatter: '{value} ms'
                }
            },
            yAxis: {
                type: 'category',
                data: yAxis,
                axisLine: {
                    show: false
                }
            },
            series: [
                {
                    type: 'scatter',
                    symbolSize(val) {
                        return val[2] * 2;
                    },
                    data: dataSetList,
                    animationDelay(idx) {
                        return idx * 5;
                    }
                }
            ]
        };
    };
    const [eChartsInstance, setEChartsInstance] = useState(null);
    useEffect(() => {
        const chartsContainer = echarts.init(document.getElementById('distribution-charts'));
        setEChartsInstance(chartsContainer);
        if (data) {
            chartsContainer.setOption(generateOption(data), true);
        }
        else {
            chartsContainer.setOption(defaultChartsOption, true);
        }
    }, []);
    useEffect(() => {
        if (data && eChartsInstance) {
            eChartsInstance.setOption(generateOption(data), true);
        }
    }, [data]);
    return (
        <div className="distribution-body">
            <div id="distribution-charts"></div>
        </div>
    );
};
export default props => {
    const {data, targetType, loading, clientType} = props;
    return (
        <Spin spinning={loading}>
            <DistributionCharts data={data} targetType={targetType} loading={loading} clientType={clientType} />
        </Spin>
    );
};
